<!--
 * @Description: In User Settings Edit
 * @Author: your name
 * @Date: 2019-07-30 20:02:30
 * @LastEditTime: 2020-02-28 11:25:38
 * @LastEditors: Please set LastEditors
 -->
<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport"
        content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>Hello APP</title>
    <link rel="stylesheet" type="text/css" href="../css/vant.css">
    <link rel="stylesheet" type="text/css" href="../css/base.css" />
    <script type="text/javascript" src="../script/jquery.js"></script>
    <script type="text/javascript" src="../script/layer/mobile/layer.js"></script>
    <script type="text/javascript" src="../script/vue.min.js"></script>
    <script type="text/javascript" src="../script/vant.min.js"></script>
    <script type="text/javascript" src="../script/fastclick.js"></script>
    <script type="text/javascript" src="../script/base.js"></script>
    <style type="text/css">
        #right {
            background-image: url('../image/index_bg2.png');
            background-repeat: no-repeat;
            background-position: center;
            background-size: cover;
            width: 100vw;
            height: 100vh;
            margin: auto;
            display: flex;
        }

        .cover {
            width: 100%;
            height: 100%;
            display: flex;
            background-image: linear-gradient(rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0.3));
        }

        .bg {
            width: 60%;
            height: auto;
            margin: auto;
        }

        .op {
            font-weight: 700;
            color: #090909;
            font-size: 60px;
            margin-left: -24px;
            letter-spacing: -2px;
        }

        .logo {
            margin-top: -34px;
            padding-bottom: 30px;
            color: #f2f0af;
            font-weight: 700;
            font-size: 24px;
        }

        .logo>* {
            vertical-align: middle;
        }

        .form>div {
            background: #090909;
            border-radius: 8px;
            margin-bottom: 15px;
        }

        .form .label {
            font-size: 14px;
            color: #e6c678;
            padding: 8px 16px 0 16px;

        }

        .form .van-cell {
            background: transparent;
            padding: 7px 16px;
        }

        .checkbox {
            width: 100%;
            background: transparent !important;
            display: flex;
            justify-content: space-between;
        }

        .van-checkbox__icon {
            background: #fff;
        }

        .van-checkbox__icon .van-icon {
            border: 1px solid #c8c9cc;
        }

        .scan {
            width: auto;
            float: right;
            margin-left: 10px;
            margin-bottom: 10px;
            color: #e6c678;
            border-bottom: 1px solid #e6c678;
            cursor: pointer;
        }

        .scanPop {
            width: 160px;
            height: 180px;
            text-align: center;
            background-color: transparent;
            margin: 0;
            padding: 0;
        }

        .van-icon-enlarge {
            font-size: 150px;
            color: #e6c678;
            margin: 0;
            padding: 0;
        }

        .inputClass {
            opacity: 0;
            width: 150px;
        }

        .scanLine {
            position: absolute;
            z-index: 2;
            width: 66%;
            height: 2px;
            transform: translateX(25%);
            background-color: #e6c678;
            animation: scanLineMove 2s infinite;
        }

        .newClass {
            color: red;
        }

        @keyframes scanLineMove {
            from {
                top: 30px;
            }

            to {
                top: 120px;
            }
        }

        .equipmentContent {
            display: flex;
            flex-wrap: wrap;
            flex: 1;
            overflow-y: auto;
        }

        .equipmentContent .van-col {
            padding: 5px 8px;
            text-align: center;
        }

        .equipmentContent .van-col .van-button {
            width: 100%;
        }

        .equipmentContent .van-col .van-button .van-button__text {
            color: #090909;
        }

        .showPop {
            background-color: transparent;
            color: red;
            font-size: 30px;
            font-weight: bold;
            text-align: center;
        }

        .rightBottomBtns {
            position: absolute;
            bottom: 10px;
            right: 10px;
        }

        .directionIcon:hover,
        .directionIcon:active {
            background-color: rgba(255, 255, 255, 0.5);
        }

        .directionIcon {
            position: absolute;
            bottom: 0;
            right: 0;
            width: 50px;
            height: 50px;
            border-radius: 10px;
            background-color: rgba(255, 255, 255, 0.3);
            box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.5);
        }

        .directionIcon img {
            width: 100%;
            height: 100%;
            z-index: 9999;
        }

        .bottomBtn {
            position: absolute;
            padding: 8px;
            bottom: 0;
            right: 0;
        }
    </style>
</head>

<body>
    <div id="app" v-cloak>
        <div class="box flex-direction-r" v-if="whetherEquipment">
            <div id="right">
                <div class="cover">
                    <div class="bg" id="bg">
                        <div class="op">LOGIN</div>
                        <div class="logo"><img src="../image/logo_1.png"
                                style="width: 70px;margin-right: 15px;"><span>劳伦斯工控机</span></div>
                        <div class="form">
                            <div>
                                <div class="label">姓名</div>
                                <van-field v-model="formData.loginName" placeholder="请输入姓名"></van-field>
                            </div>
                            <div>
                                <div class="label">工号</div>
                                <van-field v-model="formData.pwd" type="password" placeholder="请输入工号"></van-field>
                            </div>
                            <div class="checkbox">
                                <div class="scan" @click="handlerScan">刷卡登录</div>
                                <van-checkbox v-model="isRemb" shape="square" checked-color="#e6c678" icon-size="18px">
                                    <span style="color:#aaa">记住密码</span>
                                </van-checkbox>
                            </div>
                        </div>
                        <div class="login-btn">
                            <van-button color="linear-gradient(#fffeaa, #c07d39)" round :disabled="ifConfirm"
                                :loading="ifConfirm" loading-text="登录中..." type="primary" block @click="loginAPP()">
                                登&nbsp;&nbsp;&nbsp;&nbsp;录
                            </van-button>
                        </div>


                        <van-popup v-model="scanShow" class="scanPop">
                            <div class="scanLine"></div>
                            <van-icon name="enlarge"></van-icon>
                            <input id="autoInput" class="inputClass" inputmode="none" type="number" v-model="inputCode"
                                ref="input" autofocus @keyup.enter="inputFocus()">
                        </van-popup>

                        <van-action-sheet v-model="classShow" :actions="classActions" @select="onClassSelect">
                        </van-action-sheet>
                    </div>
                    <!-- <div class="bottomBtn">
                        <van-button type="danger" @click="loginAPP('toChoosePlan')">生产报工</van-button>
                    </div> -->
                </div>
            </div>
        </div>

        <div class="box bg" id="bg1" v-if="!whetherEquipment">
            <van-nav-bar title="请绑定机台">
            </van-nav-bar>
            <div class="equipmentContent">
                <van-col span="4" v-for="item in deviceOctions">
                    <van-button color="linear-gradient(#fffeaa, #c07d39)" type="primary" @click="equipmentClick(item)">
                        {{item.EquipmentName}}</van-button>
                </van-col>
            </div>

        </div>
    </div>
</body>

<script type="text/javascript">
    var vm;
    apiready = function () {

        var loginIndex = 0;

        function ping(ip) {

            api.ajax({
                url: 'http://' + ip + '/Frame/SqlData?cmdname=ConnectionTest',
                data: {
                    values: {}
                },
                timeout: 20,
                method: 'post',
                dataType: 'json'
            }, function (ret, err) {
                if (ret) {
                    window.localStorage.setItem('serverIP', ip);
                    vm.checkLoginStatus();
                } else {

                }
            });
        }


        vm = new Vue({
            el: '#app',
            data: {
                show: true,
                inputCode: '',
                scanShow: true,
                classShow: false,
                showLoading: false,
                formData: {
                    loginName: '',
                    pwd: ''
                },
                isRemb: true,
                showSimpleSelect: false,
                ifConfirm: false,
                classActions: [
                    {
                        name: '白班',
                        value: 'A'
                    },
                    {
                        name: '夜班',
                        value: 'B'
                    }
                ],
                roleName: '',
                ZhuSuRoleID: '',
                whetherEquipment: false,
                deviceOctions: [],
                currentUrl: ''
            },
            created: function () {
                var that = this;
                ping(APP.serverIP1);
                ping(APP.serverIP2);

                if (window.localStorage.getItem('clientHeight') != 752) {
                    document.getElementById('bg').style.zoom = 0
                    document.getElementById('bg1').style.zoom = 0
                } else {
                    document.getElementById('bg').style.zoom = 1.5
                    document.getElementById('bg1').style.zoom = 1.5
                }

                setTimeout(() => {
                    that.checkUpdate();
                }, 2000)

                that.handlerInit()
            },
            mounted() {
                var that = this;
                let height = document.documentElement.clientHeight
                window.onresize = () => { // 在页面大小发生变化时调用
                    // 把获取到的高度赋值给根div
                    document.getElementById('right').style.height = height + 'px'
                }
            },
            methods: {
                handlerInit() {
                    var that = this
                    if (!window.localStorage.getItem('Equipment')) {
                        setTimeout(() => {
                            APP.ajax('getZSEquipment', {empolorName:window.localStorage.getItem('loginName')}, function (res) {
                                that.deviceOctions = res.ds
                            })
                        }, 2000)
                    } else {
                        that.whetherEquipment = true
                        setInterval(() => {
                            if (that.whetherEquipment) {
                                that.$refs.input.focus()
                                that.$refs.input.setAttribute('readonly', 'readonly');
                                setTimeout(function () {
                                    that.$refs.input.removeAttribute('readonly');
                                }, 500);
                            }
                        }, 1500)
                    }

                    if (JSON.parse(window.localStorage.getItem('loginChecked'))) {
                        that.formData = {
                            loginName: window.localStorage.getItem('loginName'),
                            pwd: window.localStorage.getItem('pin'),
                        }
                        that.isRemb = true
                    } else {
                        that.formData = {
                            loginName: '',
                            pwd: '',
                        }
                        that.isRemb = true
                    }
                },
                checkUpdate() {
                    var that = this
                    var currentVersion0 = api.appVersion.split('.')[0]
                    var currentVersion1 = api.appVersion.split('.')[1]
                    var currentVersion2 = api.appVersion.split('.')[2]
                    APP.ajax('ZS_FILELIST', {}, function (res) {
                        var F_Ver0 = res.ds[0].F_Ver.split('.')[0]
                        var F_Ver1 = res.ds[0].F_Ver.split('.')[1]
                        var F_Ver2 = res.ds[0].F_Ver.split('.')[2]
                        if (Number(currentVersion0) < Number(F_Ver0) || Number(currentVersion1) < Number(F_Ver1) || Number(currentVersion2) < Number(F_Ver2)) {
                            api.confirm({
                                title: '有新版本，是否下载并安装',
                                msg: '版本号：' + res.ds[0].F_Ver + '\n' + '更新内容：' + res.ds[0].fremarks,
                                buttons: ['立即更新', '取消']
                            }, function (ret, err) {
                                if (ret.buttonIndex == 1) {
                                    if (api.systemType == 'android') {
                                        api.download({
                                            url: res.ds[0].D_Url,
                                            report: true
                                        }, function (downloadRet, err) {
                                            // alert('downloadRet' + JSON.stringify(downloadRet))
                                            if (err) {
                                                api.hideProgress();
                                                api.toast({
                                                    msg: '下载失败请重试!',
                                                    duration: 2000
                                                })
                                            } else if (downloadRet.state == 0) {
                                                api.showProgress({
                                                    title: downloadRet.percent + '%',
                                                    modal: false
                                                });
                                            } else if (downloadRet && downloadRet.state == 1) {
                                                // alert('state1' + JSON.stringify(downloadRet))
                                                api.hideProgress();
                                                api.toast({
                                                    msg: '下载完成!',
                                                    duration: 2000
                                                })
                                                api.installApp({
                                                    appUri: 'file://' + downloadRet.savePath
                                                });
                                            }
                                        })
                                    }
                                }
                            });
                        }
                    })
                },
                equipmentClick(equipment) {
                    var that = this
                    vm.$toast('您已选择' + equipment.EquipmentName)
                    that.whetherEquipment = true
                    window.localStorage.setItem('Equipment', JSON.stringify(equipment))
                },
                getRole(pin) {
                    var that = this
                    APP.ajax('getZSGKRole', { pin: pin }, function (res) {
                        if (res.ds[0] && res.ds[0].RoleName) {
                            if (res.ds[0].RoleName == "管理员") {
                                that.roleName = '管理员'
                            } else if (res.ds[0].RoleName == "上下模") {
                                that.roleName = '上下模'
                            } else if (res.ds[0].RoleName == "组长") {
                                that.roleName = '组长'
                            }
                            that.ZhuSuRoleID = res.ds[0].ZhuSuRoleID
                        } else {
                            that.roleName = '员工'
                        }
                    })
                },
                onClassSelect(val) {
                    var that = this
                    that.classShow = false
                    APP.ajax('ZS_GETTIME2', {}, function (res) {
                        var nowTime = res.ds[0].Column1

                        var date = res.ds[0].Column1.split(' ')[0]
                        var time = res.ds[0].Column1.split(' ')[1]
                        var hour = time.split(':')[0]
                        var minute = time.split(':')[1]
                        var YearMonthDay
                        var newDate
                        var before

                        if (hour < 7) {
                            newDate = +new Date(date) - 1000 * 60 * 60 * 24
                            before = APP.getFormatDay(new Date(newDate))
                            YearMonthDay = before.replace(/-/g, "")
                        } else if (hour == 7) {
                            if (minute <= 20) {
                                newDate = +new Date(date) - 1000 * 60 * 60 * 24
                                before = APP.getFormatDay(new Date(newDate))
                                YearMonthDay = before.replace(/-/g, "")
                            } else {
                                YearMonthDay = date.replace(/-/g, "")
                            }
                        } else {
                            YearMonthDay = date.replace(/-/g, "")
                        }
                        var currentdate = YearMonthDay + val.value

                        var obj

                        if (that.currentUrl == 'toIndex') {
                            obj = {
                                classOption: val.name,
                                roleName: that.roleName,
                                ZhuSuRoleID: that.ZhuSuRoleID,
                                loginTime: nowTime,
                                currentBatch: currentdate,
                            }
                        } else {
                            obj = {
                                classOption: val.name,
                                roleName: that.roleName,
                                ZhuSuRoleID: that.ZhuSuRoleID,
                                loginTime: nowTime,
                                currentBatch: currentdate,
                                choosePlan: true
                            }
                        }
                        api.openFrame({
                            name: 'index',
                            url: 'index.html',
                            reload: true,
                            slidBackEnabled: false,
                            bgColor: '#29292a',
                            pageParam: obj
                        })
                    })
                },
                inputFocus() {
                    var that = this
                    vm.$toast(that.inputCode);
                    APP.ajax('ZS_CardLogin', { P_Card: that.inputCode }, function (res) {
                        if (res.ds[0].status == 200) {
                            window.localStorage.setItem('loginName', res.ds[0].Name)
                            window.localStorage.setItem('card_no', res.ds[0].card_no)
                            window.localStorage.setItem('pin', res.ds[0].pin)
                            that.getRole(res.ds[0].pin)
                            vm.$toast(res.ds[0].msg);
                            that.scanShow = false

                            var time = new Date().getHours()
                            if (time >= 7 && time <= 19) {
                                that.classActions[0].color = '#e6c678'
                            } else {
                                that.classActions[1].color = '#e6c678'
                            }

                            that.currentUrl = res.ds1[0].Column1 == 1 ? 'toChoosePlan' : 'toIndex'
                            that.classShow = true
                        } else {
                            vm.$toast(res.ds[0].msg);
                        }
                        that.inputCode = ''
                    })
                },
                handlerScan() {
                    var that = this
                    that.scanShow = true
                    that.$refs.input.focus()
                    that.$refs.input.setAttribute('readonly', 'readonly');
                    setTimeout(function () {
                        that.$refs.input.removeAttribute('readonly');
                    }, 500);
                },
                checkLoginStatus: function () {
                    var that = this;
                    if (loginIndex) {
                        that.loginAPP();
                    } else {
                        if (APP.getUserInfo()) {
                            that.formData.loginName = APP.getUserInfo().loginName;
                            if (APP.getUserInfo().isRemb && APP.getUserInfo().pwd) {
                                that.formData.pwd = APP.getUserInfo().pwd;
                                that.isRemb = true;
                                that.loginAPP();
                            }
                        }
                    }

                },
                loginAPP: function () {
                    var that = this;
                    that.ifConfirm = true;

                    var obj = {
                        name: that.formData.loginName,
                        pin: that.formData.pwd
                    }
                    APP.ajax('ZS_PasswordLogin', obj, function (res) {
                        window.localStorage.setItem('loginChecked', JSON.stringify(that.isRemb))
                        if (res.ds[0].status == 200) {
                            window.localStorage.setItem('loginName', res.ds[0].Name)
                            window.localStorage.setItem('card_no', res.ds[0].card_no)
                            window.localStorage.setItem('pin', res.ds[0].pin)

                            that.getRole(res.ds[0].pin)

                            var time = new Date().getHours()
                            if (time >= 7 && time <= 19) {
                                that.classActions[0].color = '#e6c678'
                            } else {
                                that.classActions[1].color = '#e6c678'
                            }

                            that.currentUrl = res.ds1[0].Column1 == 1 ? 'toChoosePlan' : 'toIndex'
                            that.classShow = true

                            vm.$toast(res.ds[0].msg)
                        } else {
                            vm.$toast(res.ds[0].msg)
                        }
                        that.ifConfirm = false;
                    })
                }
            }
        })
    };
</script>

</html>